<template>
  <div class="employees-container">
    <div class="app-container">
      <el-card>
        <!-- 具体页面结构 -->
        <!-- 头部 -->
        <page-tools>
          <template #left>
            <span>总记录数: {{ total }} 条</span>
          </template>
          <template #right>
            <el-button type="warning" size="small" @click="importExcel">excel导入</el-button>
            <el-button type="danger" size="small" @click="exportExcel">excel导出</el-button>
            <el-button type="primary" size="small" @click="showDialog = true">新增员工</el-button>
          </template>
        </page-tools>
      </el-card>
      <el-card style="margin-top: 10px;">
        <!-- 表格 -->
        <el-table v-loading="loading" border :data="list">
          <el-table-column label="序号" type="index" width="80" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="头像">
            <template slot-scope="scope">
              <!-- <img :src="scope.row.staffPhoto" width="80"> -->
              <ImgPlaceHolder :url="scope.row.staffPhoto" @click.native="clickDialog(scope.row.staffPhoto)" />
            </template>
          </el-table-column>
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式">
            <template slot-scope="scope">
              <!--
                1.使用插槽机制拿到当前要处理的源数据
                2.对源数据进行格式转换 (过滤器/methods中的方法) 方法调用渲染返回值
               -->
              {{ _formatFormOfEmployment(scope.row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间">
            <template slot-scope="scope">
              {{ _formatTimeOfEntry(scope.row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="employeeDetail(scope.row.id)">查看</el-button>
              <el-button type="text" size="small" @click="editRole(scope.row.id)">分配角色</el-button>
              <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div style="height: 60px; margin-top: 10px">
          <!--
            默认情况下每页10条
            如果接口获取到的数据不是每页10条
            需要我们通过参数传入配置分页器每页显示多少条
             -->
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="params.size"
            @current-change="changePage"
          />
        </div>
      </el-card>
    </div>
    <!-- 弹框组件 -->
    <add-employee
      :show-dialog="showDialog"
      @close-dialog="closeDialog"
    />
    <!-- 二维码组件 -->
    <el-dialog title="二维码" :visible="showCodeDialog" @close="showCodeDialog = false">
      <!-- 二维码 -->
      <el-row type="flex" justify="center">
        <canvas ref="myCanvas" />
      </el-row>
    </el-dialog>
    <!-- 分配角色弹框 -->
    <assign-role :show-role-dialog="showRoleDialog" :cur-id="curId" @close-role-dialog="closeRoleDialog" />
  </div>
</template>

<script>
import { reqGetEmployeeList, delEmployee } from '@/api/employees'
import Types from '@/api/constant/employees'
import dayjs from 'dayjs'
import AddEmployee from './components/add-employee.vue'
import { transSourceDataToArray } from '@/utils/excelData'
import QrCode from 'qrcode'
import AssignRole from './components/assign-role'
export default {
  components: {
    AddEmployee,
    AssignRole
  },
  data() {
    return {
      params: {
        page: 1,
        size: 10 // 只能告诉后端每页要几条数据
      },
      total: 0,
      list: [],
      loading: false,
      showDialog: false,
      showCodeDialog: false,
      showRoleDialog: false,
      curId: ''
    }
  },
  mounted() {
    this.getEmployeeList()
  },
  methods: {
    // 分配角色
    editRole(id) {
      // 记录id
      this.curId = id
      this.showRoleDialog = true
    },
    // 分配角色弹框控制
    closeRoleDialog() {
      this.showRoleDialog = false
    },
    // 二维码事件
    clickDialog(url) {
      if (url === null) {
        return
      } else {
        this.showCodeDialog = true
        this.$nextTick(() => {
          // 如果这里 url 写的是网址, 就会跳转到对应网址 (二维码分享效果)
          // 固定 QrCode.toCanvas(DOM元素，传递的值)
          QrCode.toCanvas(this.$refs.myCanvas, url)
        })
      }
    },
    // 获取员工列表
    async getEmployeeList() {
      const res = await reqGetEmployeeList(this.params)
      // console.log(res)
      this.total = res.total
      this.list = res.rows
      this.loading = false
    },
    // 分页
    changePage(page) {
      // 1.当前页赋给params.page
      this.params.page = page
      // 2.再次获取数据
      this.getEmployeeList()
    },
    // 格式化处理
    // 处理聘用形式
    _formatFormOfEmployment(val) {
      // 拿到原始值做格式化处理 然后把处理之后的返回出去即可
      const map = {}
      Types.hireType.forEach(item => {
        map[item.id] = item.value
      })
      return map[val]
    },
    // 处理入职时间
    _formatTimeOfEntry(val) {
      return dayjs(val).format('YYYY-MM-DD')
    },
    // 删除员工
    del(id) {
      console.log('删除了', id)
      this.$confirm('确定删除员工么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 调接口，发请求
        await delEmployee(id)
        // 拉取列表
        this.getEmployeeList()
        // 提示删除成功
        this.$message.success('删除员工成功')
      }).catch((error) => {
        console.log(error)
      })
    },
    // 关弹层
    closeDialog() {
      this.showDialog = false
    },
    // Excel导入
    importExcel() {
      this.$router.push('/import')
    },
    // 导出Excel表
    exportExcel() {
      // 导出功能依赖的插件体积较大 而且导出不是频繁使用的功能 为了减小最终生产包的大小 采用按需导入的方式
      // 只有点击了导出按钮之后 依赖的这个插件包才会被正式引入到项目中进行使用
      import('@/vendor/Export2Excel').then(async excel => {
        const header = {
          '手机号': 'mobile',
          '姓名': 'username',
          '入职日期': 'timeOfEntry',
          '聘用形式': 'formOfEmployment',
          '转正日期': 'correctionTime',
          '工号': 'workNumber',
          '部门': 'departmentName'
        }
        const res = await reqGetEmployeeList(this.params)
        const data = transSourceDataToArray(res.rows, header)
        excel.export_json_to_excel({
          header: Object.keys(header), // 表头 必填 表头字段组成的数据
          data, // 具体数据 必填  二维数据
          filename: '员工列表', // 文件名称
          autoWidth: true, // 宽度
          bookType: 'xlsx' // 文件类型
        })
      })
    },
    // 跳转员工详情页
    employeeDetail(id) {
      this.$router.push({
        path: '/employees/detail',
        query: {
          id
        }
      })
    }
  }
}
</script>

<style>
</style>
